<template>
    <view :style="{ '--color': color }">
        <status-bar title="领取优惠券" :goHome="fromShare"></status-bar>

        <view class="Wrapper">
            <image :src="$imgUrls(share_info.v_headimg)" v-if="share_info.info" mode="aspectFill" class="v_headimg"></image>
            <text class="color_33 size30 m-top16" v-if="share_info.v_name">{{ share_info.v_name }}</text>
            <text class="color_33 size28 m-top10" v-if="share_info.v_tel">{{ share_info.v_tel }}</text>
            <text class="color_33 size32 m-top20" v-if="share_info.title">{{ share_info.title }}</text>
            <text class="color_33 size32 m-top10" v-if="share_info.info">{{ share_info.info }}</text>
        </view>

        <view class="itemList_box">
            <view class="couponListBg" :style="{ background: parseInt(pageData.state) == 1 ? pageData.color : 'rgba(153,153,153,0.5)' }"></view>
            <view class="right_top statre1" v-if="pageData.couName" :style="{ 'border-top-color': parseInt(pageData.state) == 1 ? pageData.color : 'rgba(153,153,153,0.5)' }">
                <text>{{ pageData.couName }}</text>
            </view>

            <view class="flex-box align-center p-top20 p-bot20">
                <view class="cont_money flex-box d-flex a-center j-centert">
                    <view class="flex">
                        <view class="moneylimit" :style="{ color: parseInt(pageData.state) == 1 ? pageData.color : 'rgba(153,153,153,0.5)' }">
                            {{ pageData.unit }}
                            <text v-if="pageData.price.toString().length > 3" style="font-size: 48rpx">{{ pageData.price }}</text>
                            <text v-else style="font-size: 66rpx">{{ pageData.price }}</text>
                            {{ pageData.type != 1 ? pageData.priElse : '' }}
                        </view>
                        <view class="cont_right">
                            <view class="discount_coupon_btn" v-if="pageData.state == 0" style="background: #999999">已关闭</view>
                            <!-- <view class="discount_coupon_btn" v-if="item.state == 1 && item.restrict != 4" :style="{'background': item.color?item.color:''}" @click="backHome">去使用</view> -->
                            <view class="discount_coupon_btn" v-if="pageData.state == 1 && pageData.restrict == 4" :style="{ background: pageData.color ? pageData.color : '' }">核销码</view>
                            <!--     <view
                                class="discount_coupon_btn"
                                v-if="pageData.state == 1 && pageData.restrict == 4"
                                :style="{ background: pageData.color ? pageData.color : '' }"
                                @click="showCode(index)"
                            >
                                核销码
                            </view> -->
                            <view class="discount_coupon_btn" v-if="pageData.state == 2" style="background: #999999">已使用</view>
                            <view class="discount_coupon_btn" v-if="pageData.state == 3" style="background: #999999">已过期</view>
                            <view class="discount_coupon_btn" v-if="pageData.state == 4" style="background: #999999">未开始</view>
                        </view>
                    </view>
                </view>
                <view class="cont_describe">
                    <view class="discount_coupon_title lines" :style="{ color: parseInt(pageData.state) == 1 ? pageData.color : 'rgba(153,153,153,0.5)', 'width:': '100%' }">
                        {{ pageData.title }}
                    </view>
                    <view class="discount_coupon_info flex-box align-center" :style="{ color: parseInt(pageData.state) == 1 ? pageData.color : 'rgba(153,153,153,0.5)' }">
                        <text class="lines">{{ pageData.company }}</text>
                    </view>
                    <view class="d-flex a-center j-sb">
                        <view class="discount_coupon_time" :style="{ color: parseInt(pageData.state) == 1 ? pageData.color : 'rgba(153,153,153,0.5)' }">
                            {{ pageData.expiryDate }}
                        </view>
                        <!-- <view
                            class="m-right30 zIndex"
                            v-if="pageData.state == 1 && ['5', '6', '7', '99'].includes(pageData.type)"
                            :style="{ color: pageData.color ? pageData.color : '' }"
                            @click="useCoupon(pageData)"
                        >
                            立即使用
                        </view> -->
                    </view>
                </view>
            </view>
            <view class="mid-line flex-box align-center">
                <view class="circle circle1"></view>
                <view class="line flex"></view>
                <view class="circle circle2"></view>
            </view>
            <view class="discount_coupon_intro flex-box active">
                <view class="txt flex">{{ pageData.info }}</view>
                <!-- <text class="icon-xiangxia iconfont"></text> -->
            </view>
            <view
                class="halfCicle"
                :style="{
                    background: 'url(' + staticUrl + '/images/conpon_half_circle1.png) repeat-x',
                    'background-size': '28rpx 4rpx'
                }"
            ></view>
        </view>

        <view class="Collect" :class="{ collectActive: pageData.state == 1 }" @click="Config">领取优惠卷</view>
        <showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                couponsId: '',
                share_info: '',
                pageData: '',
                currIndex: -1,
                showModal: false,
                fromShare: 0
            };
        },
        onLoad(opt) {
            if (opt.id) this.couponsId = opt.id;
            if (opt.fromShare) this.fromShare = opt.fromShare;
            this.shareCouponsInfo();
        },
        methods: {
            shareCouponsInfo() {
                this.$http
                    .post({
                        url: '/SRA_simMallApi/shareCouponsInfo',
                        data: {
                            couponsId: this.couponsId,
                            share_v_id: this.share_v_id
                        }
                    })
                    .then((res) => {
                        if (res.code != 100) return this.$Toast(res.msg);
                        if (res.share_info) this.share_info = res.share_info;
                        this.pageData = res.data;
                    });
            },
            Config() {
                if (!this.vid) return (this.showModal = true);
                if (this.pageData.state != 1) return;
                this.$showLoading('');
                this.$http
                    .post({
                        url: '/SRA_simMallApi/receiveShareCoupons',
                        data: {
                            share_v_id: this.share_v_id,
                            couponsId: this.couponsId
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 100) return this.$Toast(res.msg);
                        this.shareCouponsInfo();
                        this.Win();
                    });
            },
            async Win() {
                const Result = await this.$Modals('提示', '领取成功', '取消', '返回首页');
                if (!Result) return;
                this.$common.backHome();
            }
        },
        computed: {
            ...mapState(['share_v_id', 'color', 'vid'])
        }
    };
</script>

<style lang="scss" scoped>
    .Collect {
        width: 300rpx;
        height: 80rpx;
        background-color: #999;
        border-radius: 40rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 30rpx;
        margin: 80rpx auto 0;
    }
    .collectActive {
        background-color: var(--color) !important;
    }
    .Wrapper {
        width: 100%;
        padding: 100rpx 40rpx 0 40rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .v_headimg {
            width: 140rpx;
            height: 140rpx;
            border-radius: 50%;
        }
    }
    .qrCodeImg {
        width: 400rpx;
        height: 400rpx;
    }

    .page {
        background-color: #f5f5f5;
    }

    .nav_top_box {
        width: 100%;
        height: 80upx;
        background: #ffffff;
        display: flex;
        line-height: 80upx;
        text-align: center;
        font-size: 28upx;
        color: #333333;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
    }

    .navlists {
        width: 33.33%;
    }

    .navAction {
        position: relative;
    }

    .Advertising_article {
        width: 33.33%;
        height: 4upx;
        position: absolute;
        bottom: 0;
        left: 0;
        transition: left 0.2s;
    }

    .discount_coupon_list {
        width: 100%;
        padding: 100upx 20upx 20upx 20upx;
    }

    .itemList_box {
        width: 710rpx;
        background: #ffffff;
        border-radius: 20upx;
        position: relative;
        margin: 30rpx auto;
        overflow: hidden;
        .Gift {
            background: rgb(30, 159, 255);
            color: #fff;
            font-size: 28rpx;
            padding: 6rpx 20rpx;
            border-radius: 10rpx;
            position: absolute;
            right: 20rpx;
            top: 120rpx;
            z-index: 10;
            .shareBtn {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 11;
                background-color: transparent;
                border: none;
            }
            .shareBtn::after {
                border: none;
            }
        }
    }

    .cont_describe {
        width: calc(100% - 200rpx);
        padding-left: 8rpx;
    }

    .cont_right {
        color: #ed702d;
        text-align: center;
        margin-top: 4rpx;
        position: relative;
        z-index: 5;
    }

    .cont_money {
        width: 200rpx;
        border-radius: 20upx;
        text-align: center;
        color: #ed702d;
        align-items: flex-end;
        padding-bottom: 10rpx;
    }

    .moneylimit text {
        margin: 0 6upx;
        font-size: 70upx;
        font-weight: bold;
    }

    .discount_coupon_title {
        font-size: 34rpx;
        font-weight: bold;
        padding-right: 30rpx;
    }

    .discount_coupon_time {
        font-size: 28rpx;
    }

    .discount_coupon_info {
        height: 60rpx;
        padding-right: 30rpx;

        text {
            color: inherit;
            font-size: 28rpx;

            line-height: 30rpx;
            font-weight: 400;
        }
    }

    .expire {
        font-size: 20upx;
    }

    .discount_coupon_btn {
        padding: 0 30rpx;
        height: 48rpx;
        line-height: 48rpx;
        border-radius: 48rpx;
        color: #ffffff;
        display: inline-block;
        position: relative;
    }

    .right_top {
        width: 0;
        height: 0;
        color: #ffffff;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 9;
        border-top: 80upx solid #ec612a;
        border-left: 80upx solid transparent;
    }

    .right_top text {
        position: absolute;
        transform: rotate(45deg);
    }

    .statre text {
        left: -48upx;
        top: -70upx;
        font-size: 24upx;
    }

    .statre1 text {
        left: -50upx;
        top: -62upx;
        font-size: 16rpx;
    }

    .mid-line {
        .line {
            height: 2rpx;
            border-top: 2rpx dashed rgba(0, 0, 0, 0.1);
        }

        .circle {
            width: 24rpx;
            height: 24rpx;
            background: #f5f5f5;
            top: 50%;
            border-radius: 50%;
            z-index: 5;
        }

        .circle1 {
            margin-left: -12rpx;
        }

        .circle2 {
            margin-right: -12rpx;
        }
    }

    .discount_coupon_intro {
        height: 60rpx;
        position: relative;
        z-index: 5;
        padding: 10rpx 20rpx 0;
        min-height: 60rpx;
        transition: all 0.2s;

        .txt {
            color: #9e9d9d;
            height: 30rpx;
            text-align: justify;
        }

        .icon-xiangxia {
            font-size: 28rpx;
            color: #9e9d9d;
            transition: all 0.2s;
        }

        &.active {
            height: auto;
            align-items: center;
            flex-direction: column;

            .txt {
                height: auto;
                width: 100%;
            }

            .icon-xiangxia {
                transform: rotate(180deg);
                margin: 10rpx;
            }
        }
    }

    .halfCicle {
        height: 4rpx;
        position: relative;
        z-index: 5;
    }

    .couponListBg {
        width: 100%;
        height: 100%;
        opacity: 0.03;
        position: absolute;
        z-index: 1;
    }
    // .itemList_box {
    //     width: 710rpx;
    //     background: #ffffff;
    //     border-radius: 20upx;
    //     position: relative;
    //     margin: 30rpx auto;
    //     overflow: hidden;
    //     .couponListBg {
    //         width: 100%;
    //         height: 100%;
    //         opacity: 0.03;
    //         position: absolute;
    //         z-index: 1;
    //     }
    //     .right_top {
    //         width: 0;
    //         height: 0;
    //         color: #ffffff;
    //         position: absolute;
    //         top: 0;
    //         right: 0;
    //         z-index: 9;
    //         border-top: 80upx solid #ec612a;
    //         border-left: 80upx solid transparent;
    //     }
    //     .right_top text {
    //         position: absolute;
    //         transform: rotate(45deg);
    //     }
    //     .statre text {
    //         left: -48upx;
    //         top: -70upx;
    //         font-size: 24upx;
    //     }

    //     .statre1 text {
    //         left: -50upx;
    //         top: -62upx;
    //         font-size: 16rpx;
    //     }
    // }
    // .cont_money {
    //     width: 200rpx;
    //     border-radius: 20upx;
    //     text-align: center;
    //     color: #ed702d;
    //     align-items: flex-end;
    //     padding-bottom: 10rpx;
    // }

    // .moneylimit text {
    //     margin: 0 6upx;
    //     font-size: 70upx;
    //     font-weight: bold;
    // }
    // .cont_right {
    //     color: #ed702d;
    //     text-align: center;
    //     margin-top: 4rpx;
    //     position: relative;
    //     z-index: 5;
    // }
    // .discount_coupon_btn {
    //     padding: 0 30rpx;
    //     height: 48rpx;
    //     line-height: 48rpx;
    //     border-radius: 48rpx;
    //     color: #ffffff;
    //     display: inline-block;
    //     position: relative;
    // }
    // .cont_describe {
    //     width: calc(100% - 200rpx);
    //     padding-left: 8rpx;
    // }
    // .discount_coupon_title {
    //     font-size: 34rpx;
    //     font-weight: bold;
    //     padding-right: 30rpx;
    // }
    // .discount_coupon_info {
    //     height: 60rpx;
    //     padding-right: 30rpx;

    //     text {
    //         color: inherit;
    //         font-size: 28rpx;

    //         line-height: 30rpx;
    //         font-weight: 400;
    //     }
    // }
    // .discount_coupon_time {
    //     font-size: 28rpx;
    // }
    // .mid-line {
    //     .line {
    //         height: 2rpx;
    //         border-top: 2rpx dashed rgba(0, 0, 0, 0.1);
    //     }

    //     .circle {
    //         width: 24rpx;
    //         height: 24rpx;
    //         background: #f5f5f5;
    //         top: 50%;
    //         border-radius: 50%;
    //         z-index: 5;
    //     }

    //     .circle1 {
    //         margin-left: -12rpx;
    //     }

    //     .circle2 {
    //         margin-right: -12rpx;
    //     }
    // }
    // .discount_coupon_intro {
    //     height: 60rpx;
    //     position: relative;
    //     z-index: 5;
    //     padding: 10rpx 20rpx 0;
    //     min-height: 60rpx;
    //     transition: all 0.2s;

    //     .txt {
    //         color: #9e9d9d;
    //         height: 30rpx;
    //         text-align: justify;
    //     }

    //     .icon-xiangxia {
    //         font-size: 28rpx;
    //         color: #9e9d9d;
    //         transition: all 0.2s;
    //     }

    //     &.active {
    //         height: auto;
    //         align-items: center;
    //         flex-direction: column;

    //         .txt {
    //             height: auto;
    //             width: 100%;
    //         }

    //         .icon-xiangxia {
    //             transform: rotate(180deg);
    //             margin: 10rpx;
    //         }
    //     }
    // }
    // .halfCicle {
    //     height: 4rpx;
    //     position: relative;
    //     z-index: 5;
    // }
</style>